前言

假設今天是星期二早上。PM 在群組問：「 某某案子的 xxx 跟 OOO 過 SignOff 了沒？最新那次 DRC 有多嗎？」結果有幾個工程師同時去查：A 翻 share folder 裡日期最接近的報告，B 在信件裡搜昨天的 checklist，C 憑記憶馬上回說「應該是過了」。十分鐘後三個答案對不上，最後發現看到的根本不是同一個版本。

SignOff 的結果從來就不缺。缺的是 大家怎麼看到同一個現況。接下來要分享的，就是這個困擾的解決方案 - 一個完整專案的 Dashboard：網站怎麼分層、各層各管什麼、畫面怎麼從首頁一路走到看到某顆 Block 的情況

專案目前還在整理中，之後再放上來分享

到底在統一什麼

神聖而不可分割的一塊 ( 笑

設計團隊的痛點不是「沒有資料」，而是資料的住處、形狀、時效都不一樣。在 EDA 工具各自產報告後，有人把重點貼到試算表，有人只在會議口頭講。時間一久，專案變成一座沒有門牌的倉庫：東西都在，但你找不到「現在」到底是哪一個。

所謂的統一入口是要對齊三件事

1. 同一條路: 所有人走同一條路：製程 → 專案 → Block → 階段。路徑一旦變成網址，就可以傳連結：「你看這個位置，我們看的是同一個 block」

2. 同一份資料: 畫面不是手貼的數字，而是讀 disk 上明確會有的檔案：描述每一次上傳跑了什麼。刷新頁面看到的，就是 disk 上現在有的東西。這讓「我昨天看過」與「你今天看到」有機會重合

3. 同一個網址:不論過去現在未來，所有專案的資料與審查，都會統一從一個網址出發

這套不是可寫入的流程系統，也不做登入。它是一份 唯讀的網站：瀏覽器負責呈現，disk上的檔案負責提供事實，把入口想成大廳，而不是展覽館。大廳要夠清楚：進來之後立刻知道有哪些製程、每個製程底下有哪些專案、每個專案有哪些 block、點下去會落到哪個階段。展覽內容 —— 細節、版本比對、品質、Waive 了沒等等 ...

用到哪些東西

如果從「完整網站後端」起步，很容易變成某個應用框架加資料庫再加上傳介面。那套對長期平台是合理的，但我不想搞那套。假設現場就只有 Python 可以用；我們要的是 把 EDA 跑出來的任何結果檔案都變成可點的網站，不再建一個資料庫，然後再把同一份資料搬進去

整個專案有幾個要點：

建置跟執行是切開。在可以用 node 的地方編好 UI 打包起來丟進遠端工作站裡面，只需要用 Python 把網站開起來給同事看就好。

在工作站以外的地方還是採用 React，而不是整頁都用拼字串的方式畫，因為網站會有好幾種頁面會反覆出現。用元件來接「這一頁的資料包」，之後要改某一層的長相，就不必去動處理檔案的邏輯

執行期間是沒有資料庫的、沒有寫入介面、沒有登入。新增一個專案就是多一份階層檔；新一筆 run 等於多一份上傳檔。刷新頁面，清單會再列一次。也沒有「先重啟再看」。

Q: 為什麼不只放靜態檔 (Pure Html)、連伺服器都不要？
A: 我感覺很多人都這樣做，但最後都付出了無法好好做資料比對跟資料無法很順利的刷新的代價，況且在資料量大的時候，網頁會載入非常久

整個網站其實就三個角色在傳球

先上架構

整個網站就三個角色：disk 上的靜態檔案、伺服器 、 瀏覽器(裡面分兩個「分析資料的工具」(資料處理層) 與「拿到資料作呈現工具」(畫面層))

  磁碟上的 dist/            瀏覽器
  ├─ 網頁資產          <--- 打開網站  
  ├─ 階層檔            <--- 逐份讀取 ------ 有那些專案，專案裡有哪些 block ?
  └─ 上傳檔            <--- 逐份讀取 ------ 跑了那些 run ?
              伺服器
              ├─ 送出上面那些檔案
              └─ 回答「現在有哪些檔」

網站起來之後，資料處理層會做三件事：

1. 看網址現在指到哪一層，把清單與檔案讀進來並整理成內部資料
2. 必要時補該專案的階層
3. 交出對應的快照

畫面層接到快照，才決定要去畫什麼。注意載入中與失敗也算是正式的快照。

網址全部走頁面井字號後面的路徑，對應關係大致如下：

首頁        -->                /#                  
專案        -->                /#/project/N4_DEMO)   
專案 / block / 階段   -->      /#/project/N4_DEMO/block/CHIP_TOP/apr
專案 / block / 階段 / 版本 --> /#/project/N4_DEMO/block/CHIP_TOP/apr 
專案 / 總覽                --> /#/project/N4_DEMO/summary
.
.

專案識別來自檔名：第一個底線前面是製程，後面是專案名。檔名一旦不遵守，首頁上就不會出現那張卡——這是刻意的嚴格，避免一張說不清自己是誰的卡片混進大廳。目前階段做到 APR、ECO、SignOff，以及靠右的 Summary

快照是整座橋的橋面。首頁快照帶的是「按製程分好組的專案卡」；專案快照帶的是「展平後的階層列」加上每顆 block 的燈號與葉節點數；Block 快照帶的是標題列需要的版本與負責人，以及本體是檢查表、版本樹，還是摘要。畫面不回頭去翻原始檔。誰負責「這一頁該有什麼」很清楚：引擎組包，元件拆包。

引擎內部的記憶也很瘦：整理過的專案與上傳、階層快取、版本樹快取、目前位置、錯誤字串。重新整理等於重新問清單。對唯讀儀表這是優點：你永遠看到磁碟上的最新檔。代價是第一次進站會讀比較多檔。入口階段這個代價可接受；若哪天變成瓶頸，那是「清單改成一次打包」的題目，不是今天把資料庫請回來的理由。

整理上傳檔時，只要先建立幾個直覺，欄位細節留給之後。每一筆會被收成：它屬於哪個製程與專案、哪個 block、走的是 APR 還是 ECO、父親是誰、有哪些指標、有沒有 SignOff。block 名稱必須對得上階層裡的名字；對不齊的時候，階層列還在，但燈號與葉數量會是空的——這通常代表拼字不一致，而不是網站壞了。沒有階層檔，首頁是空的；沒有上傳檔，Block 頁進得去但表是空的。

講這麼多廢話，到底看起來效果如何 ?

看一下怎麼從首頁到某個 block 的 run 裡面

首頁 —— 依製程分組的專案卡片

首頁不展示階層細節。它只做三件事：依製程分成大區塊、每張卡顯示專案名稱與 block 數量、整張卡點進去就是該專案

專案頁 —— 階層表，每一列都能點進 Block

專案頁把樹展平成表。沒有小孩的標成 block，有小孩的標成上層並寫出直接子節點數，必要時另有一列標成頂層。每一列大蓋先列一些資訊：

名稱預設點進去先進 APR，這邊就會列說，這個專案，這顆 block，跑過什麼 run，這個 run 指的是一個獨立 leaf 節點，因為前面有提到過可能半途都會 branch out 出來

Block 頁 —— 先隨便塞點東西

點進去某個 leaf 節點後，就應該要呈現該 Block 在該版本該有的資訊跟樣子了，這部分之後再細講，先看個概念就好了

小結

回顧這篇實際排了什麼結構。結果散落是流程問題，於是選了一條「檔案當事實、小伺服器當門房、引擎出快照、畫面只負責畫」的路。建置與執行切開；專案清單來自掃檔，不來自設定；網址就是地圖。團隊有一個統一入口：任何人打開同一個網址，兩次點擊就能站在某顆 block 前面。